<template>
  <div class="main">
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
    <van-cell-group>
      <van-cell title="头像" is-link>
        <div class="imageoutdiv">
          <img :src="userinfo.photo" class="imagesize" />
        </div>
      </van-cell>
      <van-cell title="昵称" is-link :value="userinfo.name" />
      <van-cell title="简介" is-link :value="userinfo.intro" />
    </van-cell-group>
    <van-cell-group class="topcolor">
      <van-cell title="性别" is-link :value="userinfo.name" />
      <van-cell title="生日" is-link :value="userinfo.name" />
    </van-cell-group>
    <van-tabbar>
      <van-button class="buttonbtn" type="default" @click="loginout"
        >退出登陆</van-button
      >
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  methods: {
    onClickLeft() {
      this.$router.push({
        path: 'mine'
      })
    },
    loginout() {
      sessionStorage.removeItem('token')
      this.$router.push({
        path: '/'
      })
    }
  },
  computed: {
    ...mapState('mine', ['userinfo'])
  }
}
</script>

<style >
.buttonbtn {
  margin: 0 auto;
  border: none;
  color: red;
  font-size: 30px;
}
.imagesize {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}
.topcolor {
  padding-top: 30px;
  background-color: #f5f7f9;
}
</style>
